﻿<!DOCTYPE html>
<html lang="en"><!-- Source is http://themes.loxdesign.net/phoenix/forms_elements.html -->
  <head>
    <meta charset="utf-8">
    <title>Phoenix - Forms - elements</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- ===================== Touch Icons ===================== -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png">

    <!-- ===================== CSS ===================== -->    
    <link href='forms_elements_files/css' rel='stylesheet' type='text/css'>  
    <link rel="stylesheet" href="forms_elements_files/bootstrap.min.css">
    <link rel="stylesheet" href="forms_elements_files/bootstrap-responsive.min.css">    

    <!-- Site specific - CSS -->   
    <link rel="stylesheet" href="forms_elements_files/prettify.css">
    <link rel="stylesheet" href="forms_elements_files/jquery-ui-1.8.20.custom.css">
    <link rel="stylesheet" href="forms_elements_files/chosen.css">
    <link rel="stylesheet" href="forms_elements_files/dropkick.css">
    <link rel="stylesheet" href="forms_elements_files/multi-select.css">    
    <link rel="stylesheet" href="forms_elements_files/jquery.ibutton.css">    
    
    <!-- Common - CSS -->  
    <link rel="stylesheet" href="forms_elements_files/common.css">
    <link rel="stylesheet" href="forms_elements_files/theme_light.css" class="style_set">
             
    <!--[if lt IE 9]>
      <script src="forms_elements_files/html5.js"></script>
    <![endif]-->

  </head>
  <body> 
    <div id="loader_cont"><img src="forms_elements_files/page_loader.gif"></div> 
    <div class="options_cont">
      <form name="myForm">
        <a class="options_btn" href="#">OPTIONS</a> 
        <div class="options group" style="left: 0; top: -898">
          <div>
            <p>Background image:</p>
            <ul class="background_list">
              <li><a class="current" id='bg_1' href="#">bg_1</a></li>
              <li><a id='bg_2' href="#">bg_2</a></li>
              <li><a id='bg_3' href="#">bg_3</a></li>
              <li><a id='bg_4' href="#">bg_4</a></li>
              <li><a id='bg_5' href="#">bg_5</a></li>
              <li><a id='bg_6' href="#">bg_6</a></li>
              <li><a id='bg_7' href="#">bg_7</a></li>
              <li><a id='bg_8' href="#">bg_8</a></li>
              <li><a id='bg_9' href="#">bg_9</a></li>
              <li><a id='bg_10' href="#">bg_10</a></li>
            </ul>
          </div>
          <div>
            <p>Color styling:</p>
            <ul class="color_list">
              <li><a class="current" id='c_1' href="#" title="Rose">rose</a></li>
              <li><a id='c_2' href="#" title="Orange">orange</a></li>
              <li><a id='c_3' href="#" title="Apple Green">apple_green</a></li>
              <li><a id='c_4' href="#" title="Sky Blue">sky_blue</a></li>
              <li><a id='c_5' href="#" title="Purple">purple</a></li>
            </ul>            
          </div>
          <div>
            <p>Patterns:</p>
            <ul class="pattern_list">
              <li><a class="current" id='p_1' href="#" title="Stripes Right">p_1</a></li>
              <li><a id='p_2' href="#" title="Stripes Left">p_2</a></li>
              <li><a id='p_3' href="#" title="Noise">p_3</a></li>
              <li><a id='p_4' href="#" title="Plain">p_4</a></li>              
            </ul>            
          </div>
          <div class="top_mn_setup">
            <p>Display top menu on:</p>
            <div>
              <input id="top_menu_click" checked="checked" type="radio" value="1" class="menu_show" name="top_menu_show"><label for="top_menu_click">Click</label>
              <input id="top_menu_hover" type="radio" value="0" class="menu_show" name="top_menu_show"><label for="top_menu_hover">Hover</label>
            </div>            
          </div>  
          <div class="clear_cache_cont"><a class="btn btn-mini" href="#">Clear Cache</a></div>              
        </div> 
      </form> 
    </div>    
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>
          </a>
          <div class="nav-collapse">            
            <ul class="nav main_nav" role="navigation">                
                <li id="mail" class="styled dropdown mail">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mail<span class="info">2</span></a>
                  <ul class="dropdown-menu top_menu">
                      <li><a class="mn_new_msg" href="mail.html"><span>New Message</span></a></li>
                      <li><a class="mn_inbox" href="mail.html"><span>Inbox</span></a></li>
                      <li><a class="mn_outbox" href="mail.html"><span>OutBox</span></a></li>
                      <li><a class="mn_spam" href="mail.html"><span>Spam</span></a></li>
                      <li><a class="mn_trash" href="mail.html"><span>Trash</span></a></li>
                  </ul>
                </li>
                <li id="chat" class="styled chat">
                  <a data-toggle="modal" href="#chat_modal">Chat<span class="info">5</span></a>     
                </li>
                <li id="notification" class="styled dropdown notification">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Notification<span class="info">4</span></a>
                  <ul class="dropdown-menu">
                    <li>
                        <a href="#">                          
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            <span>07/19/2012</span>                       
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Vivamus ut enim vitae nibh aliquet pre-tium lobortis sit amet tortor...
                            <span>07/19/2012</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Ut id dui arcu, non tempus nunc...
                            <span>07/19/2012</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Morbi faucibus suscipit nibh, ut pellen-tesque lectus pellentesque non....
                            <span>07/19/2012</span>
                        </a>
                    </li>                        
                    <li class="show_all"><a href="#">Show all notifications</a></li> 
                  </ul>
                </li>                          
            </ul> 
            <ul class="main_nav nav pull-right">                
                <li id="search" class="search"> 
                  <a href="#">Search</a> 
                  <div class="search_cont">
                      <form class="navbar-search form-search">                          
                          <input type="text" class="input-medium search-query" placeholder="Search">
                          <button type="submit">Search</button>
                      </form> 
                  </div>              
                </li> 
                <li id="settings" class="styled dropdown settings">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings</a>
                    <ul class="dropdown-menu top_menu">
                        <li class="show_all">Settings</li>
                        <li><a class="mn_site" href="#"><span>Site</span></a></li>
                        <li><a class="mn_admin" href="#"><span>Admin</span></a></li>
                        <li><a class="mn_mail" href="#"><span>Mail</span></a></li>
                        <li><a class="mn_user" href="#"><span>User</span></a></li>
                    </ul>
                </li>
                <li id="profile" class="styled dropdown profile">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile</a>
                    <ul class="dropdown-menu top_menu">                        
                        <li class="profile group">
                          <img src="forms_elements_files/user_1.jpg" width="50" height="50" alt="User">
                          <ul>
                            <li><strong>John Doe</strong></li>
                            <li>@johndoe</li>
                            <li><span>Administrator</span></li>
                          </ul>
                        </li>
                        <li><a class="mn_settings" href="#"><span>My Settings</span></a></li>
                        <li><a class="mn_profile" href="profile.html"><span>My Profile</span></a></li>
                        <li><a class="mn_logout" href="login.html"><span>Logout</span></a></li>
                    </ul>
                </li>                          
            </ul>           
          </div>
          <h1 class="brand"><a href="index.html">PHOENIX</a></h1>                                       
        </div>
      </div>
    </div>
            
    <div class="container">              
      <div class="main_content row-fluid">

        <div class="span3">

          <div class="side_nav sidebar-nav" data-spy="affix" data-offset-top="150">
			<h3 class="main_menu group">
                <span class="title">Main Menu</span>
                <a id="nav_list_btn" class="btn-collapse btn btn-inverse">
                  <span class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>              
                </a>
            </h3>
            <ul class="nav nav-list">                          
              <li><a class="home" href="index.html">Dashboard</a></li>
              <li class="sub active open">
                <a class="forms" href="#">Forms<span>5</span></a>
                <ul>
                  <li><a href="forms_layout.html">Layout</a></li>
                  <li class="active"><a href="forms_elements.html">Elements</a></li>
                  <li><a href="forms_validation.html">Validation</a></li>
                  <li><a href="forms_wizard.html">Wizard</a></li>
                  <li><a href="forms_uploader.html">File uploader &amp; WYSIWYG</a></li>                                                      
                </ul>
              </li>
              <li><a class="charts" href="charts.html">Charts</a></li>
              <li class="sub">
                <a class="tables" href="#">Tables<span>2</span></a>
                <ul>
                  <li><a href="tables_basic.html">Basic</a></li>
                  <li><a href="tables_advanced.html">Advanced</a></li>
                </ul>
              </li>
              <li><a class="calendar" href="calendar.html">Calendar</a></li>
              <li><a class="gallery" href="gallery.html">Gallery</a></li>
              <li class="sub">
                <a class="uielements" href="#">UI Elements<span>8</span></a>
                <ul>
                  <li><a href="accordions.html">Accordions</a></li>                  
                  <li><a href="buttons_icons.html">Buttons and Icons</a></li>
                  <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                  <li><a href="progressbars.html">Progressbars</a></li>                  
                  <li><a href="sliders.html">Sliders</a></li>                                    
                  <li><a href="tabs.html">Tabs</a></li>        
                  <li><a href="tooltips_popovers.html">Tooltips and Popovers</a></li>                                    
                  <li><a href="miscellaneous.html">Misc</a></li>
                </ul>
              </li>              
              <li><a class="filemanager" href="file_manager.html">File Manager</a></li>
              <li><a class="typography" href="typography.html">Typography</a></li>
              <li><a class="gridsystem" href="grid_system.html">Grid System</a></li>
              <li><a class="widgets" href="widgets.html">Widgets</a></li>
              <li class="sub">
                <a class="pages" href="#">Pages<span>6</span></a>
                <ul>
                  <li><a href="login.html">Login</a></li>                  
                  <li><a href="search.html">Search</a></li>
                  <li><a href="mail.html">Mail</a></li>
                  <li><a href="profile.html">Profile</a></li>
                  <li><a href="invoice.html">Invoice</a></li>
                  <li class="sub"> 
                    <a href="#">Error<span>6</span></a>
                    <ul>
                      <li><a href="error_403.html">403</a></li>
                      <li><a href="error_404.html">404</a></li>
                      <li><a href="error_405.html">405</a></li>
                      <li><a href="error_500.html">500</a></li>
                      <li><a href="error_503.html">503</a></li>
                      <li><a href="offline.html">Offline</a></li>
                    </ul>
                  </li>                  
                </ul>
              </li>                        
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="row-fluid">
            <div class="span12">

              <div class="span12 no_space">

                  <div class="widget">
                    <header>
                      <h3>Company Registration</h3>
                      <ul class="toggle_content">                         
                          <li class="arrow">&nbsp; <a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly form_align">                         
                        <div class="row-fluid">
                        <table style="width:100%">
                        <tr>
                        <td style="width: 170px">Company Name:</td>
                        <td><input type="text" name="text"></td>
                        <td style="width: 170px">Text input field:</td>
                        <td><input type="text" name="text"></td>

                        </tr>
                        </table>
                          
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Password input field:</div>
                          <div class="span9"><input type="password" name="password"></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Input field with placeholder:</div>
                          <div class="span9"><input type="text" name="placeholder" placeholder="Placeholder text" ></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Disabled input field:</div>
                          <div class="span9"><input type="text" name="disabled" value="disabled" disabled="disabled"></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Read only input field:</div>
                          <div class="span9"><input type="text" name="readonly" value="readonly" readonly="readonly"></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Uneditable only input field:</div>
                          <div class="span9"><span class="input-large uneditable-input">
							This text is uneditable</span></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Inline help on input field:</div>
                          <div class="span9"><input type="text"><span class="help-inline">Inline 
							help text</span></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Block help on input field:</div>
                          <div class="span9"><input type="text"><span class="help-block">A 
							longer block of help text that breaks onto a new 
							line and may extend beyond one line.</span></div>
                        </div>                        
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">From element relative sizing:</div>
                          <div class="span9 docs-input-sizes">
                            <input class="input-mini" type="text" placeholder=".input-mini">
                            <input class="input-small" type="text" placeholder=".input-small">
                            <input class="input-medium" type="text" placeholder=".input-medium">
                            <input class="input-large" type="text" placeholder=".input-large">
                            <input class="input-xlarge" type="text" placeholder=".input-xlarge">
                            <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
                          </div>
                        </div>                        
                        <hr>                        
                        <div class="row-fluid">
                          <div class="span3">Input fields with tooltip:</div>
                          <div class="span9 docs-input-sizes tooltip_cont">
                            <input type="text" name="tooltip" placeholder="Tooltip on top" data-placement="top" data-original-title="Tooltip on top">
                            <input type="text" name="tooltip" placeholder="Tooltip on right" data-placement="right" data-original-title="Tooltip on right">
                            <input type="text" name="tooltip" placeholder="Tooltip on bottom" data-placement="bottom" data-original-title="Tooltip on bottom">
                            <input type="text" name="tooltip" placeholder="Tooltip on left" data-placement="left" data-original-title="Tooltip on left">
                          </div>
                        </div>                        
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Input fields with tooltip:</div>
                          <div class="span9 docs-input-sizes popover_cont">
                            <input type="text" name="popover" placeholder="Popover on top" data-placement="top" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-original-title="Popover on top">
                            <input type="text" name="popover" placeholder="Popover on right" data-placement="right" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-original-title="Popover on right">
                            <input type="text" name="popover" placeholder="Popover on bottom" data-placement="bottom" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-original-title="Popover on bottom">
                            <input type="text" name="popover" placeholder="Popover on left" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit." data-original-title="Popover on left">
                          </div>
                        </div>                        
                        <hr>                        
                    </section>
                  </div>

              </div>

            </div>                  
          </div><!--/row-->
        
        </div><!--/span-->
      </div><!--/row-->      
      <hr>

      <footer>
        <p>&copy; LoxDesign.net - Phoenix 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- ===================== CHAT - Modal ===================== -->
    <div id="chat_modal" class="chat_modal modal fade hide">
      <div class="modal-header">
        <ul>
          <li class="toggle_users"><a href="#">Show Users</a></li>
          <li class="status">
            <a class="online" href="#"><span>Status</span></a>  
            <ul>
               <li><a class="online" href="#" title="Online"><span>Online</span></a></li>
               <li><a class="away" href="#" title="Away"><span>Away</span></a></li>
               <li><a class="busy" href="#" title="Busy"><span>Busy</span></a></li>
               <li><a class="invisiblee" href="#" title="Invisible"><span>Invisible</span></a></li>
               <li><a class="offline" href="#" title="Offline"><span>Offline</span></a></li>
             </ul> 
          </li>
          <li class="chat_name">John Doe</li>
        </ul>       
        <button type="button" class="close" data-dismiss="modal">x</button>        
      </div>
      <div class="modal-body">
        <div class="msg_cont left">
          <img src="forms_elements_files/user_1.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>John Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>
        <div class="msg_cont right">
          <img src="forms_elements_files/user_2.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>Jessie Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>
        <div class="msg_cont left">
          <img src="forms_elements_files/user_1.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>John Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>        
      </div>
      <div class="modal-footer">        
        <textarea></textarea>
        <a href="#" class="btn btn-inverse">Send</a>
      </div>
    </div>

    <!-- ===================== JS ===================== -->
    <script src="forms_elements_files/jquery-1.7.2.min.js"></script>    
    <script src="forms_elements_files/bootstrap.min.js"></script>   
    <script src="forms_elements_files/ios-orientationchange-fix.js"></script>      
    <script src="forms_elements_files/jquery-ui-1.8.20.custom.min.js"></script>      
    <script src="forms_elements_files/common.js"></script>                 
    
    <!-- Site specific - JS --> 
    <script src="forms_elements_files/prettify.js"></script> 
    <script src="forms_elements_files/jquery.maskedinput-1.3.min.js"></script> 
    <script src="forms_elements_files/chosen.jquery.min.js"></script> 
    <script src="forms_elements_files/scrollability.min.js"></script> 
    <script src="forms_elements_files/jquery.dropkick-1.0.0.js"></script> 
    <script src="forms_elements_files/jquery.multi-select.js"></script> 
    <script src="forms_elements_files/jquery.quicksearch.js"></script> 
    <script src="forms_elements_files/jquery.autogrowtextarea.js"></script> 
    <script src="forms_elements_files/jquery.textareaCounter.plugin.js"></script> 
    <script src="forms_elements_files/ui.spinner.min.js"></script> 
    <script src="forms_elements_files/jquery.ibutton.min.js"></script> 
    <script src="forms_elements_files/jquery.metadata.js"></script> 

    <script src="forms_elements_files/script.js"></script>
    <script src="forms_elements_files/forms_elements.js"></script>

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31818910-2']);
      _gaq.push(['_setDomainName', 'loxdesign.net']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </body>
</html>
